<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script src="/html/util.js"></script>
    <script>
        window.onload = function (){
            findContry();
        }

        async function findContry(){
            await axios.get("/contry/findAll",null).then(e =>{
               var info = e.data;
               var str = "";
               for(var i=0;i<info.length;i++){
                   str += `<option value="${info[i].id}">${info[i].name}</option>`;
               }
               $("contrySelect").innerHTML = str;
            });
            findCity();
        }

        function findCity(){
            axios.get("/city/findByContry",{
                params:{
                    contyId:$("contrySelect").value
                }
            }).then(e => {
               var info = e.data;
               var str = "";
               for(var i=0;i<info.length;i++){
                   str += `<option value="${info[i].id}">${info[i].name}</option>`;
               }
               $("citySelect").innerHTML = str;
            });
        }
    </script>

</head>
<body>
    <select id="contrySelect" onchange="findCity()"></select>
    <select id="citySelect"></select>
</body>
</html>